<template>
  <div class="wrap">
    <x-header :left-options="{backText: ''}"
              class="arrow-weight">{{title}}人员检索</x-header>
    <main style="position:relative;background:#fff;padding-bottom:30px;top:44px">
      <div style="padding: 15px 0 0;">
        <checker v-model="val"
                 default-item-class="demo-item"
                 selected-item-class="demo-item-selected"
                 style="width: 80%; margin: 0 auto;">
          <checker-item v-for="(item, index) in options"
                        :key="index"
                        :value="item.value">{{item.name}}</checker-item>
        </checker>
      </div>
      <x-input style="background: #fff;
                    border-radius: 5px;
                    height: 36px;
                    padding: 0px 10px;
                    border: 1px solid #9a9696;
                    margin:14px 20px 10px"
               v-model="keyword"
               @on-enter="result"
               :show-clear="false">
        <img type="search"
             slot="label"
             src="../../static/img/search.png">
        <icon slot="right"
              :type="isShowIcon_key"
              @click.native="watchkey"></icon>
      </x-input>
      <span style="color:red;font-size:10px;margin:10px 10px 10px 20px">
        如有疑问，请到服务台咨询或联系 郝庆会:18838060418
      </span>
      <x-table full-bordered
               style="background:#fff">
        <thead>
          <tr style="background:#eee">
            <th>姓名</th>
            <th>性别</th>
            <th>班级</th>
            <th>报到状态</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(item,index) in person"
              :key="index"
              @click="resultClick(index)">
            <td>{{item.name}}</td>
            <td>{{item.phone}}</td>
            <td>{{item.dorm}}</td>
            <td>{{item.stat}}</td>
          </tr>
        </tbody>
      </x-table>
    </main>
    <div v-transfer-dom>
      <confirm v-model="show"
               title="查看信息"
               :show-cancel-button="false">
        <x-input v-for="(item,index) in items"
                 disabled
                 label-width="90px"
                 :key="index"
                 :title="item.name"
                 :value="item.value"></x-input>
      </confirm>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      title: localStorage.getItem("academy"),
      person: [],
      sletperson: [],
      keyword: "",
      isShowIcon_key: "",
      val: "1",
      show: false,
      options: [
        {
          name: "姓名",
          value: "1"
        },
        {
          name: "班级",
          value: "2"
        },
        {
          name: "宿舍号",
          value: "3"
        }
      ],
      items: [
        {
          name: "姓名",
          value: ""
        },
        {
          name: "性别",
          value: ""
        },
        {
          name: "班级",
          value: ""
        },
        {
          name: "宿舍号",
          value: ""
        }
      ]
    };
  },
  mounted() {
    let res = [];
    let num = this.val;
    let k = "";
    let params = new URLSearchParams();
    params.append("type", num);
    params.append("key", k);
    this.axios({
      method: "post",
      url: "/student/selRegAllStu",
      params
    }).then(resp => {
      console.log(resp);
      if (resp.data.code == 0) {
        if (resp.data.result == null) {
          this.showmsg = true;
          this.msg = resp.data.msg;
        } else {
          this.sletperson = resp.data.result;
          for (let i = 0; i < resp.data.result.length; i++) {
            res.push({
              name: resp.data.result[i].name,
              phone: resp.data.result[i].sex,
              dorm: resp.data.result[i].classes,
              stat: this.reportSta(
                resp.data.result[i].status,
                resp.data.result[i].conStatus
              )
            });
          }
        }
      } else if (resp.data.code == 1) {
        this.showmsg = true;
        this.msg = resp.data.msg;
      } else if (resp.data.code == 2) {
        this.showmsg = true;
        this.msg = resp.data.msg;
        setTimeout(() => {
          this.$router.push("/admin/login");
        }, 1000);
      }
    });
    this.person = res;
    this.$vux.loading.show({
      text: "Loading"
    });
    setTimeout(() => {
      this.$vux.loading.hide();
    }, 1000);
  },
  watch: {
    keyword(newValue) {
      this.isShowIcon_key = newValue == "" ? "" : "clear";
    }
  },
  methods: {
    watchkey() {
      this.keyword = "";
    },
    reportSta(sta, consta) {
      let rep = "";
      if (sta == 0) {
        rep = "未提交信息";
      } else if (sta == 1) {
        if (consta == 0) {
          rep = "待确认";
        } else if (consta == 1) {
          rep = "已确认";
        }
      }
      return rep;
    },
    result() {
      this.person = this.getperson(this.keyword);
    },
    resultClick(index) {
      this.show = true;
      this.items[0].value = this.sletperson[index].name;
      this.items[1].value = this.sletperson[index].sex;
      this.items[2].value = this.sletperson[index].classes;
      this.items[3].value = this.sletperson[index].dorHouse;
    },
    getperson(val) {
      let rs = [];
      let num = this.val;
      let k = val;
      k = k.replace(/#/g, "-");
      let params = new URLSearchParams();
      params.append("type", num);
      params.append("key", k);
      this.axios({
        method: "post",
        url: "/student/selRegAllStu",
        params
      }).then(resp => {
        if (resp.data.code == 0) {
          this.sletperson = resp.data.result;
          for (let i = 0; i < resp.data.result.length; i++) {
            rs.push({
              name: resp.data.result[i].name,
              phone: resp.data.result[i].sex,
              dorm: resp.data.result[i].classes,
              stat: this.reportSta(
                resp.data.result[i].status,
                resp.data.result[i].conStatus
              )
            });
          }
        } else if (resp.data.code == 1) {
          this.showmsg = true;
          this.msg = resp.data.msg;
        } else if (resp.data.code == 2) {
          this.showmsg = true;
          this.msg = resp.data.msg;
          setTimeout(() => {
            this.$router.push("/admin/login");
          }, 1000);
        }
      });
      return rs;
    }
  }
};
</script>

<style scoped>
.wrap {
  height: 100vh;
  background: #fff;
}
.vux-header {
  text-align: center;
  font-size: 20px;
  letter-spacing: 2px;
  background: rgb(0, 160, 233);
  width: 100%;
  position: fixed;
  z-index: 1;
}
#select {
  font-size: 16px;
  padding: 7px;
  margin: 18px 0px 0px 15px;
  border-radius: 5px;
}
.demo-item {
  padding: 5px 15px;
  margin: 0px 10px;
  border-radius: 15px;
  border: 1px solid #37aefc;
}
.demo-item-selected {
  background-color: #37aefc;
  color: #fff;
}
</style>